<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>大事件-后台首页</title>
        <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/iconfont.css" />
        <link rel="stylesheet" href="css/main.css" />
        <script src="./libs/jquery-1.12.4.min.js"></script>
        <!-- 导入bootstrap的js文件 -->
        <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="sider">
            <a href="#" class="logo"
                ><img src="images/logo02.png" alt="logo"
            /></a>
            <div class="user_info">
                <img src="images/2.jpg" alt="person" />
                <span
                    >欢迎&nbsp;&nbsp;<i style="font-style: normal"
                        >默认名字</i
                    ></span
                >
                <b>管理员</b>
            </div>
            <!-- 左侧导航栏 -->
            <div class="menu">
                <div class="level01 active">
                    <a href="./main_count.html" target="main_frame"
                        ><i class="iconfont icon-yidiandiantubiao04"></i
                        ><span>首页</span></a
                    >
                </div>

                <div class="level01">
                    <a href="#"
                        ><i class="iconfont icon-icon-article"></i
                        ><span>文章管理</span
                        ><b class="iconfont icon-arrowdownl"></b
                    ></a>
                </div>

                <ul class="level02 active">
                    <li>
                        <a href="./article_list.html" target="main_frame"
                            ><i class="iconfont icon-previewright"></i
                            ><span>文章列表</span></a
                        >
                    </li>
                    <li>
                        <a href="./article_release.html" target="main_frame"
                            ><i class="iconfont icon-previewright"></i
                            ><span>发表文章</span></a
                        >
                    </li>
                    <li>
                        <a href="./article_category.html" target="main_frame"
                            ><i class="iconfont icon-previewright"></i
                            ><span>文章类别管理</span></a
                        >
                    </li>
                </ul>

                <div class="level01">
                    <a href="./comment_list.html" target="main_frame"
                        ><i class="iconfont icon-comment"></i
                        ><span>评论管理</span></a
                    >
                </div>
                <div class="level01" id="user">
                    <a href="./user.html" target="main_frame"
                        ><i class="iconfont icon-user"></i
                        ><span>个人中心</span></a
                    >
                </div>
            </div>
            <!-- 顶部栏 -->
            <div class="header_bar">
                <div class="user_center_link">
                    <a href="./user.html" target="main_frame">个人中心</a>
                    <img src="images/2.jpg" alt="person" />
                    <a href="javascript:void(0)" class="logout"
                        ><i class="iconfont icon-tuichu"></i> 退出</a
                    >
                </div>
            </div>
            <!-- 右侧主体内容 -->
            <div class="main" id="main_body">
                <iframe
                    name="main_frame"
                    src="./main_count.html"
                    frameborder="0"
                    style="width: 100%; height: 100%"
                ></iframe>
            </div>
        </div>
    </body>
</html>

<script>
    $(function () {
        // 1. 发起ajax请求,获得用户的简单信息
        // 如果直接发起ajax请求,会被拒绝403
        // 在请求的基础上携带token数据,再发起
        $.ajax({
            type: "get",
            url: "http://localhost:8080/api/v1/admin/user/info",
            // 利用请求头携带token
            // 问题: 20多个请求都要写以下代码,low?
            headers: {
                Authorization: localStorage.getItem("token75"),
            },
            success: function (backData) {
                console.log(backData);
                $(".user_info img, .user_center_link img").attr(
                    "src",
                    backData.data.userPic
                );
                $(".user_info span").html(
                    `欢迎&nbsp;&nbsp;${backData.data.nickname}`
                );
            },
        });

        // 3. 给退出按钮设置点击事件
        $(".logout").on("click", function () {
            // 4. 删除本地保存的token,跳转回登录页面
            localStorage.removeItem("token75");
            alert("当前账户退出成功,请重新登录!");
            window.location = "./login.html";

            // 思考: 当用户没有登录,直接打开首页,因为出现提示,让用户重新登录
        });

        // 4. 给一级菜单设置点击事件
        $(".level01").on("click", function () {
            // 5. 给当前按钮添加类名active 移除兄弟元素的类名
            $(this)
                .addClass("active")
                .siblings(".level01")
                .removeClass("active");

            // 6. 判断是否点击了文章管理按钮
            // 通过按钮的下标来判断
            if ($(this).index() == 1) {
                // 没有固定是上拉收缩还是下拉展开
                $(".level02").slideToggle();

                // 7. 设置二级菜单箭头动画,给箭头标签添加或移除类名
                $(".icon-arrowdownl").toggleClass("rotate0");
            } else {
                // 让二级菜单的第一个li标签选中
                $(".level02").slideUp();
                $(".icon-arrowdownl").removeClass("rotate0");
            }
        });

        // 8. 设置二级菜单点击效果
        // 切换iframe显示页面: 设置target属性
        // 设置选中效果
        $(".level02 li").on("click", function () {
            // 改变点击按钮的选中效果
            $(this).addClass("active").siblings().removeClass("active");
        });
    });
</script>
